import React, { useEffect, useState } from 'react'
import { Table, Button, Modal, Tree } from 'antd';
import axios from 'axios'
import { DeleteOutlined, EditOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
const { confirm } = Modal;
export default function RoleList() {
  const [dataSource, setdataSource] = useState([])
  const [RightList, setRightList] = useState([])
  const [CurrentRights, setCurrentRights] = useState([])
  const [CurrentId, setCurrentId] = useState(0)
  const [isModalOpen, setisModalOpen] = useState(false)
  const columns = [
    {
      title: 'ID',
      dataIndex: 'id',
      render: (id) => {
        return <b>{id}</b>
      }
    },
    {
      title: '角色名称',
      dataIndex: 'roleName'
    },
    {
      title: '操作',
      render: (item) => {
        return <div>
          <Button type="danger" shape="circle" icon={<DeleteOutlined />} onClick={() => showDeleteConfirm(item)} />
          <Button type="primary" shape="circle" icon={<EditOutlined />} onClick={() => {
            setisModalOpen(true)
            setCurrentRights(item.rights)
            setCurrentId(item.id)
          }} />
        </div>
      }
    }
  ]
  const showDeleteConfirm = (item) => {
    confirm({
      title: '你确定要删除吗？',
      icon: <ExclamationCircleOutlined />,
      // content: 'Some descriptions',
      okText: 'Yes',
      okType: 'danger',
      cancelText: 'No',
      onOk() {
        // console.log('OK');
        deleteMethod(item)
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  const deleteMethod = (item) => {
    // 当前页面同步状态 + 后端同步
    setdataSource(dataSource.filter(data => data.id !== item.id))
    axios.delete(`http://localhost:8000/roles/${item.id}`)
  }


  useEffect(() => {
    axios.get('http://localhost:8000/roles').then(res => {
      // console.log(res.data);
      setdataSource(res.data)
    })
  }, [])

  useEffect(() => {
    axios.get('http://localhost:8000/rights?_embed=children').then(res => {
      //  
      setRightList(res.data)
    })
  }, [])

  const handleOk = () => {
    setisModalOpen(false)
    //同步dataSource

    setdataSource(dataSource.map(item => {
      if (item.id === CurrentId) {
        return {
          ...item,
          rights: CurrentRights
        }
      }

      return item
    }))
    //同步后端

    axios.patch(`http://localhost:8000/roles/${CurrentId}`,{
      rights:CurrentRights
    })


  }

  const handleCancel = () => {
    setisModalOpen(false)
  }

  const onCheck = (checkKeys) => {
    // console.log(checkKeys);
    setCurrentRights(checkKeys.checked)
  }
  return (
    <div>
      <Table dataSource={dataSource} columns={columns} rowKey={(item) => item.id} />;
      <Modal title="权限分配" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
        <Tree
          checkable
          treeData={RightList}
          checkedKeys={CurrentRights}
          onCheck={onCheck}
          checkStrictly={true}
        />
      </Modal>
    </div>
  )
}
